<!doctype html>
<html lang="en">
  <head>
    <title>Hello Dark Mode</title>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="color-scheme" content="dark light" />
    <meta name="theme-color" content="" />
    <link rel="icon" content="" />
    <script>
      // If `prefers-color-scheme` is not supported, fall back to light mode.
      // In this case, light.css will be downloaded with `highest` priority.
      if (window.matchMedia('(prefers-color-scheme)').media === 'not all') {
        document.documentElement.style.display = 'none';
        document.head.insertAdjacentHTML(
          'beforeend',
          '<link rel="stylesheet" href="light.css" onload="document.documentElement.style.display = ``">',
        );
      }
    </script>
    <link
      rel="stylesheet"
      href="dark.css"
      media="(prefers-color-scheme: dark)"
    />
    <link
      rel="stylesheet"
      href="light.css"
      media="(prefers-color-scheme: light)"
    />
    <link rel="stylesheet" href="common.css" />
    <link rel="stylesheet" href="slider.css" />
    <script type="module" src="dark-mode-toggle-playground.mjs"></script>
    <script type="module" src="../src/dark-mode-toggle.mjs"></script>
  </head>
  <body>
    <main>
      <h1>Hi there!</h1>
      <img
        src="cat.jpg"
        alt="Sitting cat in front of a tree"
        width="640"
        height="390"
      />
      <p>
        Lorem ipsum dolor sit amet, legere ancillae ne vis. Ne vim laudem
        accusam consectetuer, eu utinam integre abhorreant sea. Quo eius veri
        ei, nibh invenire democritum vel in, utamur vulputate id est. Possit
        ceteros vis an.
      </p>
      <form id="content">
        <fieldset>
          <legend>Lorem ipsum</legend>
          <div>
            <select>
              <option>Lorem</option>
              <option>Ipsum</option>
            </select>
          </div>
          <div>
            <button type="button">Lorem</button>
          </div>
          <div>
            <label>
              <input type="text" value="Lorem ipsum" />
              Lorem ipsum
            </label>
          </div>
          <div>
            <label>
              <input type="search" value="Lorem ipsum" />
              Lorem ipsum
            </label>
          </div>
          <div>
            <label><input checked type="checkbox" /> Lorem</label>
            <label><input type="checkbox" /> Ipsum</label>
          </div>
          <div>
            <label><input checked name="foo" type="radio" /> Lorem</label>
            <label><input name="foo" type="radio" /> Ipsum</label>
          </div>
        </fieldset>
      </form>
      <p>
        Also see the <a href="unstyled.html">unstyled variant</a>
        that shows the out-of-the-box experience.
      </p>
      <p>
        Run <code>npm run build</code> and see the
        <a href="dist.html">built variant</a> that uses the minified version of
        the script in the <code>dist</code> folder.
      </p>
      <p>
        Per default, the custom element is optimized for loading speed.
        Depending on your page, this can introduce flashing (<a
          href="with-flashing.html"
          >example with flashing</a
        >). At the expense of loading speed using
        <code>document.write()</code> and following the
        <a
          href="https://github.com/GoogleChromeLabs/dark-mode-toggle?tab=readme-ov-file#-using-different-stylesheets-per-color-scheme-that-are-conditionally-loaded"
          >instructions in the README</a
        >, you can prevent this (<a href="without-flashing.html"
          >example without flashing</a
        >).
      </p>
      <p>
        You can also check out the
        <a href="internal-stylesheets.html">demo with internal stylesheets</a>.
      </p>
    </main>
    <aside>
      <dark-mode-toggle id="dark-mode-toggle-1"></dark-mode-toggle>
    </aside>
    <aside>
      <dark-mode-toggle id="dark-mode-toggle-2"></dark-mode-toggle>
    </aside>
    <aside>
      <dark-mode-toggle
        id="dark-mode-toggle-3"
        legend="Dark Mode"
        light="off"
        dark="on"
        remember="always"
      ></dark-mode-toggle>
    </aside>
    <aside>
      <dark-mode-toggle
        id="dark-mode-toggle-4"
        legend="Theme Switcher"
        light="Light"
        dark="Dark"
        remember="Remember this"
        appearance="switch"
      ></dark-mode-toggle>
    </aside>
    <aside>
      <p>
        You can also style the toggle into a slider appearance like below,
        checkout the <code>slider.css</code> file.
      </p>
      <p>
        Unfortunately this slider toggle will not work with custom CSS
        properties such as <code>--dark-mode-toggle-icon-size</code> etc.
        properly. You must replace these values manually in
        <code>slider.css</code> due to the fact that pseudo elements cannot
        inherit the defined values.
      </p>
      <dark-mode-toggle
        id="dark-mode-toggle-5"
        class="slider"
        legend="Dark Slider"
        remember="Remember this"
        appearance="toggle"
      ></dark-mode-toggle>
    </aside>
    <aside>
      <dark-mode-toggle
        id="dark-mode-toggle-6"
        legend="3-way Theme Switcher"
        light="Light"
        system="System"
        dark="Dark"
        appearance="three-way"
      ></dark-mode-toggle>
    </aside>
  </body>
</html>
